<template>
    <div class="wrap">
        <WorksDetail :templateStatus="templateStatus" :sharedInfo="sharedInfo" :playStatus="playStatus" @toggleLike="toggleLike" v-if="vuex_worksId"></WorksDetail>
        <view class="no-works" v-else><u-empty text="作品已被删除或获取数据异常" mode="data"></u-empty></view>
    </div>
</template>
<script>
import WorksDetail from '../components/WorksDetail.vue';
import { getTemplateDetail } from '@/api/template.js';
import { getWorksDetail, recordLike } from '@/api/public.js';
import { setAllVuexData } from '@/mixins/setAllVuexData.js';
export default {
    name: '',
    data() {
        return {
            templateStatus: 'shareView',
            sharedInfo: {},
            shareData: {},
            currentWorksDetail: {},
            playStatus: true
        };
    },
    mixins: [setAllVuexData],
    onLoad(option) {
        this.$u.vuex('vuex_music', {
            url: ''
        });
        if (option.shareData) {
            this.shareData = JSON.parse(option.shareData);
            this.setData(JSON.parse(option.shareData));
        }
        if (option.sharedInfo) {
            this.sharedInfo = JSON.parse(option.sharedInfo);
        }
        wx.showShareMenu({
            menus: ['shareAppMessage', 'shareTimeline']
        });
    },
    onShow() {
        this.playStatus = true;
    },
    methods: {
        async setData(data) {
            console.log(data);
            let templateDetail = [];
            let currentWorksDetail = {};
            this.$uniPromise.setTitle(data.name);
            // 当前作品的详细数据
            currentWorksDetail = await getWorksDetail({
                worksid: data.worksId,
                openid: this.vuex_openid
            });
            console.log(currentWorksDetail);
            if (currentWorksDetail && currentWorksDetail.tempid) {
                templateDetail = await getTemplateDetail(currentWorksDetail.tempid);
            } else {
                this.$u.vuex('vuex_worksId', '');
            }
            if (templateDetail && templateDetail.length > 0) {
                this.setAllVuexData(currentWorksDetail, templateDetail, data.worksId);
            } else {
                this.$u.vuex('vuex_worksId', '');
            }
        },
        // 切换点赞功能
        async toggleLike() {
            let result = await recordLike({
                worksid: this.vuex_worksId,
                openid: this.vuex_openid
            });
            if (result.RequestStatus === 100) {
                this.$u.vuex('vuex_worksLikeStatus', !this.vuex_worksLikeStatus);
            }
        }
    },
    watch: {},
    components: { WorksDetail },
    beforeDestroy() {
        this.playStatus = false;
    },
    onShareAppMessage(res) {
        let name = this.vuex_nickName === '请登录' ? '' : this.vuex_nickName;
        return {
            title: `${name}分享了相册"${this.vuex_templateData.name}"`,
            path: `/pages/empty/empty?shareData=${JSON.stringify(this.shareData)}&sharedInfo=${JSON.stringify(this.sharedInfo)}`,
            imageUrl: `${this.vuex_templateData.theme}`
        };
    }
};
</script>
<style lang="scss" scoped>
.wrap {
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 66;
    .music-wrap {
        position: fixed;
        right: 30rpx;
        top: 30rpx;
        width: 58rpx;
        height: 58rpx;
        z-index: 20;
    }
    .view-info-wrap {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 750rpx;
        height: 160rpx;
        z-index: 20;
    }
    .no-works {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
